<template>
	<template v-if='page'>
		<Page :config='control' :refresh='control.refresh' :table='tableConfig' :bgcolor="hasLeftBox?'':'bcf'" :loading='loading' :contentClass='contentClass'>
			<template v-if='hasLeftBox'>
				<div class='ex fx h'>
					<slot name='leftBox'></slot>
					<div class='h ex fv bcf plr10'>
						<SearchForm ref='searchRef' :config='search' :table='tableConfig' @submit='onSearch' @reset='onReset' :loading='loading'/>
						<slot></slot>
						<Table ref='tableRef' :config='tableConfig' :search='search' @init='onTableInit'>
							<template #prefix='{data}'>
								<slot name='prefix' :data='data'></slot>
							</template>
							<template #child='{ row, index }'>
								<slot name='child' :row='row' :index='index'></slot>
							</template>
						</Table>
					</div>
				</div>
			</template>
			<template v-else>
				<SearchForm ref='searchRef' :config='search' :table='tableConfig' @submit='onSearch' @reset='onReset' :loading='loading'/>
				<slot></slot>
				<Table ref='tableRef' :config='tableConfig' :search='search' @init='onTableInit'>
					<template #prefix='{ data }'>
						<slot name='prefix' :data='data'></slot>
					</template>
					<template #child='{ row, index }'>
						<slot name='child' :row='row' :index='index'></slot>
					</template>
				</Table>
			</template>
		</Page>
	</template>
	<template v-else>
		<SearchForm ref='searchRef' :config='search' :table='tableConfig' @submit='onSearch' @reset='onReset' :loading='loading'/>
		<slot></slot>
		<Table ref='tableRef' :config='tableConfig' :search='search' @init='onTableInit'>
			<template #prefix='{data}'>
				<slot name='prefix' :data='data'></slot>
			</template>
			<template #child='{ row, index }'>
				<slot name='child' :row='row' :index='index'></slot>
			</template>
		</Table>
	</template>
</template>

<script setup>
	/* --------------------------- Component --------------------------- */
	const Page 			= $.lazy(()=>import('#tp/content/page-content.vue'))
	const SearchForm 	= $.lazy(()=>import('#cpt/form/search-form.vue'))
	const Table 		= $.lazy(()=>import('@antd/table.vue'))
	/* --------------------------- props --------------------------- */
	const props = defineProps({
		search 			: { type:Object, default:{ data:[] } },
		table 			: { type:Object, default:{} },
		control 		: { type:Object, default:{} },
		page 			: { type:Boolean, default: true },
		refresh 		: { type:Boolean, default: true },
		contentClass 	: { type:String, default: 'plr10' },
		hasLeftBox 		: Boolean
	})
	const { table, control } = props
	
	/* --------------------------- ref --------------------------- */
	let tableRef = $ref()
	let searchRef = $ref()
	let loading = $ref()
	
	/* --------------------------- method --------------------------- */
	const onSearch = param => tableRef.search({ param })
	const onReset = () => tableRef.reset()
	
	const f = {
		search			: onSearch,							// 搜索表格
		// form
		setValue 		: param => searchRef.setValue(param),
		getValue 		: name => searchRef.getValue(name),
		// table
		refresh 		: () => tableRef.refresh(),				// 刷新表格
		refreshClear 	: () => tableRef.refreshClear(),		// 刷新表格，并清除复选框
		cacheRefresh 	: () => tableRef.cacheRefresh( searchRef.getValue() ),
		// keys
		clearKeys 		: () => tableRef.clearKeys(), 			// 清除复选框
		setKeys 		: keys => tableRef?.setKeys?.(keys), 	// 设置选中
		getKeys 		: () => tableRef.getKeys(), 			// 获取选中 keys
		keys 			: v => tableRef.keys(v),
		rows 			: v => tableRef.rows(v),
		data 			: v => tableRef.data(v),
		//
		open 			: value => tableRef.open(value), 		// 打开弹窗
	}
	
	const tableConfig = {
		tableRef: f,
		searchRef,
		...table,
		...(control.perm ? { perm: control.perm  } : {}),
		onLoading: v => loading = v
	}
	
	const emit = defineEmits(['init'])
	
	const onTableInit = f => {
		emit('init', f)
		tableConfig.tableRef = f.tableRef
	}
	/* --------------------------- 通信 --------------------------- */
	defineExpose(f)
</script>
